<template>
    <view class="flex min-h-[100vh-44px] flex-col justify-between bg-primary text-gray-100">
        <!-- 导航栏 -->
        <view class="shadow-lg">
            <view class="container mx-auto flex items-center justify-between px-4 py-3">
                <!-- <div class="flex items-center space-x-4">
                    <a href="/" class="text-2xl font-bold text-accent">FilmHub</a>
                </div> -->
                <view>
                    <navigator url="/pages/index/index" open-type="switchTab" hover-class="navigator-hover">
                        <text class="text-gray-300 text-sm transition hover:text-white">返回首页</text>
                    </navigator>
                </view>
            </view>
        </view>

        <!-- 登录表单 -->
        <view class="flex items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
            <view class="w-full max-w-md space-y-8">
                <view class="text-center">
                    <h2 class="mt-6 text-3xl font-bold">欢迎回来</h2>
                    <p class="mt-2 text-gray-400">登录您的FilmHub账户</p>
                </view>

                <view class="rounded-lg bg-secondary p-8 shadow-xl">
                    <form class="mt-8 space-y-6" action="#" method="POST" @submit="handleLoginSubmit">
                        <view class="space-y-4 rounded-md shadow-sm">
                            <view>
                                <label for="username" class="mb-1 block text-sm font-medium">用户名</label>
                                <view class="relative">
                                    <input
                                        id="username"
                                        name="username"
                                        type="text"
                                        required
                                        class="relative block w-full rounded-md border border-gray-600 bg-gray-700 px-4 placeholder-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-accent"
                                        placeholder="your username" />
                                    <view class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                        <svg
                                            class="h-5 w-5 text-gray-400"
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path
                                                fill-rule="evenodd"
                                                d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </view>
                                </view>
                            </view>
                            <view>
                                <view class="mb-1 flex items-center justify-between">
                                    <label for="password" class="block text-sm font-medium">密码</label>
                                    <!-- <a href="#" class="text-sm text-accent hover:underline">忘记密码?</a> -->
                                </view>
                                <view class="relative">
                                    <input
                                        id="password"
                                        name="password"
                                        type="password"
                                        required
                                        class="relative block w-full rounded-md border border-gray-600 bg-gray-700 px-4 py-2 placeholder-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-accent"
                                        placeholder="••••••••" />
                                    <view class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                        <svg
                                            class="h-5 w-5 text-gray-400"
                                            xmlns="http://www.w3.org/2000/svg"
                                            viewBox="0 0 20 20"
                                            fill="currentColor">
                                            <path
                                                fill-rule="evenodd"
                                                d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
                                                clip-rule="evenodd" />
                                        </svg>
                                    </view>
                                </view>
                            </view>
                        </view>

                        <!-- <view class="flex items-center">
                            <input
                                id="remember-me"
                                name="remember-me"
                                type="checkbox"
                                class="h-4 w-4 rounded border-gray-600 bg-gray-700 text-accent focus:ring-accent" />
                            <label for="remember-me" class="ml-2 block text-sm">记住我</label>
                        </view> -->

                        <view class="my-8">
                            <button
                                form-type="submit"
                                class="group relative flex w-full justify-center rounded-md border border-transparent bg-accent px-4 py-2 text-sm font-medium text-white transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2">
                                登录
                            </button>
                        </view>
                    </form>

                    <view class="mt-6">
                        <view class="relative">
                            <view class="absolute inset-0 flex items-center">
                                <view class="w-full border-t border-gray-600"></view>
                            </view>
                            <view class="relative flex justify-center text-sm">
                                <span class="bg-secondary px-2 text-gray-400">还没有账户?</span>
                            </view>
                        </view>

                        <view class="mt-4">
                            <navigator
                                url="/pages/register/register"
                                class="flex w-full justify-center rounded-md border border-gray-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2">
                                注册新账户
                            </navigator>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { getAllUsersAPI } from "@/api";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();

const handleLoginSubmit = async (e: any) => {
    const { username, password } = e.detail.value;
    console.log(username, password);

    const users = await getAllUsersAPI();

    const user = users.find(u => u.username === username && u.password === password);

    if (user) {
        userStore.userinfo = user;
        uni.showToast({ title: "登录成功", icon: "none" });
        uni.switchTab({ url: "/pages/index/index" });
    } else {
        uni.showToast({ title: "用户名或密码错误", icon: "none" });
    }
};
// // 页面周期函数--监听页面加载
// onLoad() {},
// // 页面周期函数--监听页面初次渲染完成
// onReady() {},
// // 页面周期函数--监听页面显示(not-nvue)
// onShow() {},
// // 页面周期函数--监听页面隐藏
// onHide() {},
// // 页面周期函数--监听页面卸载
// onUnload() {},
// // 页面处理函数--监听用户下拉动作
// // onPullDownRefresh() { uni.stopPullDownRefresh(); },
// // 页面处理函数--监听用户上拉触底
// // onReachBottom() {},
// // 页面处理函数--监听页面滚动(not-nvue)
// // onPageScroll(event) {},
// // 页面处理函数--用户点击右上角分享
// // onShareAppMessage(options) {},
</script>

<style lang="scss" scoped>
input {
    height: 50px;
}
.auth-container {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02);
}

.input-field {
    transition: all 0.2s ease;
}

.input-field:focus {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.social-btn {
    transition: all 0.2s ease;
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.auth-link {
    transition: all 0.2s ease;
}

.auth-link:hover {
    color: #000;
}
</style>
